new Vue({
    el: '#permissions',
    data: function () {
        return {
            searchForm: { //查询条件
                searchDate: new Date()
            },
            DDFB: false,
            activeName: 'map',
            myChart: '',
            APE: '200万',
            YCB: '30人',
            xAxisProvinceRanked: {data: ['北京市', '上海市', '浙江省', '广东省', '江苏省', '山东省', '陕西省', '北京市', '上海市', '浙江省', '广东省', '江苏省', '山东省', '陕西省', '山东省', '陕西省']}, //省份排名
            seriesProvinceRanked: [{
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: ['30%', -20],
                        color: '#e6061f'
                    }
                },
                data: [0.89, 0.78, 0.64, 0.62, 0.55, 0.53, 0.5, 0.89, 0.78, 0.64, 0.62, 0.55, 0.53, 0.5, 0.53, 0.5],
                barWidth: '40%'
            }],
            xAxisManagerRanked: {data: ['jack', 'bruce', 'michael', 'aaron', 'jflszz', 'jack', 'bruce', 'michael', 'aaron', 'jflszz']}, //客户经理排名
            seriesManagerRanked: [{
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: ['30%', -20],
                        color: '#e6061f'
                    }
                },
                data: [0.89, 0.78, 0.64, 0.62, 0.55, 0.89, 0.78, 0.64, 0.62, 0.55],
                barWidth: '40%'
            }],
            mapdata: [{
                name: '北京', value: 3000
            }, {
                name: '广东', value: 500
            }, {
                name: '江苏', value: 1000
            }, {
                name: '湖北', value: 2000
            }, {
                name: '山东', value: 1200
            }, {
                name: '浙江', value: 2300
            }, {
                name: '福建', value: 800
            }, {
                name: '河北', value: 500
            }, {
                name: '辽宁', value: 100
            }, {
                name: '河南', value: 500
            }, {
                name: '山西', value: 500
            }, {
                name: '安徽', value: 500
            }, {
                name: '四川', value: 500
            }, {
                name: '上海', value: 800
            }, {
                name: '天津', value: 500
            }, {
                name: '广西', value: 1500
            }],
            city: [{ name: '惠州', value: 800 }, 
                { name: '广州', value: 1500 }, 
                { name: '韶关', value: 500 }, 
                { name: '肇庆', value: 500 }, 
                { name: '中山', value: 800 }, 
                { name: '江门', value: 800 }, 
                { name: '珠海', value: 800 }, 
                { name: '佛山', value: 800 }, 
                { name: '清远', value: 800 }, 
                { name: '东莞', value: 800 }, 
                { name: '深圳', value: 800 }, 
                { name: '镇江', value: 100 }, 
                { name: '徐州', value: 500 }, 
                { name: '宿迁', value: 200 }, 
                { name: '泰州', value: 300 }, 
                { name: '南京', value: 800 }, 
                { name: '无锡', value: 100 }, 
                { name: '常州', value: 100 }, 
                { name: '南通', value: 300 }, 
                { name: '苏州', value: 500 }, 
                { name: '荆州', value: 500 }, 
                { name: '黄石', value: 500 }, 
                { name: '荆门', value: 500 }, 
                { name: '武汉', value: 500 }, 
                { name: '宜昌', value: 500 }, 
                { name: '襄阳', value: 500 }, 
                { name: '青岛', value: 500 }, 
                { name: '烟台', value: 500 }, 
                { name: '威海', value: 500 }, 
                { name: '临沂', value: 500 }, 
                { name: '聊城', value: 500 }, 
                { name: '济宁', value: 500 }, 
                { name: '淄博', value: 500 }, 
                { name: '嘉兴', value: 500 }, 
                { name: '绍兴', value: 500 }, 
                { name: '金华', value: 500 }, 
                { name: '台州', value: 500 }, 
                { name: '杭州', value: 500 }, 
                { name: '宁波', value: 500 }, 
                { name: '温州', value: 500 }, 
                { name: '福州', value: 500 }, 
                { name: '泉州', value: 500 }, 
                { name: '莆田', value: 500 }, 
                { name: '龙岩', value: 500 }, 
                { name: '漳州', value: 500 }, 
                { name: '保定', value: 500 }, 
                { name: '唐山', value: 500 }, 
                { name: '秦皇岛', value: 500 }, 
                { name: '沧州', value: 500 }, 
                { name: '邯郸', value: 500 }, 
                { name: '抚顺', value: 500 }, 
                { name: '鞍山', value: 500 }, 
                { name: '葫芦岛', value: 500 }, 
                { name: '焦作', value: 500 }, 
                { name: '南阳', value: 500 }, 
                { name: '洛阳', value: 500 }, 
                { name: '新乡', value: 500 }, 
                { name: '开封', value: 500 }, 
                { name: '长治', value: 500 }, 
                { name: '临汾', value: 500 }, 
                { name: '晋中', value: 500 }, 
                { name: '大同', value: 500 }, 
                { name: '柳州', value: 500 }, 
                { name: '桂林', value: 500 }, 
                { name: '玉林', value: 500 }, 
                { name: '贵港', value: 500 }, 
                { name: '北海', value: 500 }, 
                { name: '梧州', value: 500 }, 
                { name: '钦州', value: 500 }, 
                { name: '南宁', value: 500 }],
            //有CSO的省会
            provinces: {
                "河北": "hebei",
                "山西": "shanxi",
                "辽宁": "liaoning",
                "江苏": "jiangsu",
                "浙江": "zhejiang",
                "福建": "fujian",
                "山东": "shandong",
                "河南": "henan",
                "湖北": "hubei",
                "广东": "guangdong",
                "广西": "guangxi"
            },
            provincesData: [{
                name: '北京', value: 3000
            }, {
                name: '广东', value: 500
            }, {
                name: '江苏', value: 1000
            }, {
                name: '湖北', value: 2000
            }, {
                name: '山东', value: 1200
            }, {
                name: '浙江', value: 2300
            }, {
                name: '福建', value: 800
            }, {
                name: '河北', value: 500
            }, {
                name: '辽宁', value: 100
            }, {
                name: '河南', value: 500
            }, {
                name: '山西', value: 500
            }, {
                name: '安徽', value: 500
            }, {
                name: '四川', value: 500
            }, {
                name: '上海', value: 800
            }, {
                name: '天津', value: 500
            }, {
                name: '广西', value: 1500
            }],
            legendChannelsDistribution: ['中信银行', '民生银行', '渣打银行', '工商银行', '建设银行', '东莞银行', '其他'],  //渠道分布
            seriesChannelsDistribution: [{
                name: 2018,
                type: 'pie',
                center: ['40%', '50%'],
                radius: [120, 180],
                data: [{
                    value: 135,
                    name: '中信银行'
                }, {
                    value: 110,
                    name: '民生银行'
                }, {
                    value: 310,
                    name: '渣打银行'
                }, {
                    value: 510,
                    name: '工商银行'
                }, {
                    value: 610,
                    name: '建设银行'
                }, {
                    value: 810,
                    name: '东莞银行'
                }, {
                   value: 110,
                    name: '其他' 
                }, {
                    value: 135,
                    name: '中信银行'
                }, {
                    value: 110,
                    name: '民生银行'
                }, {
                    value: 310,
                    name: '渣打银行'
                }, {
                    value: 510,
                    name: '工商银行'
                }, {
                    value: 610,
                    name: '建设银行'
                }, {
                    value: 810,
                    name: '东莞银行'
                }, {
                   value: 110,
                    name: '其他' 
                }]
            }],
            DDTable: [{
                branch: '北京市',
                CSO: '北京',
                bank: '渣打银行北京分行',
                manager: '崔明超',
                product: '筑福未来B款',
                paymentTerm: 3,
                APE: 152
            }, {
                branch: '辽宁省',
                CSO: '沈阳',
                bank: '中信银行沈阳浑南支行',
                manager: '王爽',
                product: '筑福未来B款',
                paymentTerm: 3,
                APE: 107
            }, {
                branch: '北京市',
                CSO: '北京',
                bank: '渣打银行北京东方广场支行',
                manager: '崔明超',
                product: '筑福未来B款',
                paymentTerm: 3,
                APE: 100
            }, {
                branch: '天津市',
                CSO: '天津',
                bank: '中信华津支行',
                manager: '李春红',
                product: '金雪球',
                paymentTerm: 3,
                APE: 72
            }, {
                branch: '山东省',
                CSO: '威海',
                bank: '中信银行威海经区支行',
                manager: '王志红',
                product: '金雪球',
                paymentTerm: 5,
                APE: 50
            }]
        }
    },
    mounted: function () {
        this.resizeChart()
        this.initChartMap()
    },
    methods: {
        handleClick: function (tab, event) { //tab切换
            switch(tab.name) {
                case 'provinceRanked': 
                    this.initChartBar('省份排名', this.xAxisProvinceRanked, '', this.seriesProvinceRanked)
                    this.DDFB = false
                    break;
                case 'managerRanked': 
                    this.initChartBar('客户经理排名', this.xAxisManagerRanked, '', this.seriesManagerRanked)
                    this.DDFB = false
                    break;
                case 'map': 
                    this.initChartMap()
                    this.DDFB = false
                    break;
                case 'channelsDistribution': 
                    this.initChartPie('渠道分布', this.legendChannelsDistribution, this.seriesChannelsDistribution)
                    this.DDFB = false
                    break;
                case 'productDistribution': 
                    this.initChartPie('产品分布', this.legendChannelsDistribution, this.seriesChannelsDistribution)
                    this.DDFB = false
                    break;
                case 'DDDistribution': 
                    this.DDFB = true
                    break;
            }
        },
        resizeChart: function () { //计算eChart画布尺寸
            this.$refs['myChart'].style.width = document.querySelector('.card-body').offsetWidth - 230 + 'px'
            this.$refs['myChart'].style.height = 600 + 'px'
        },
        initChartBar: function (title, xAxis, legendData, series) { //柱状图
            var _this = this
            this.myChart = echarts.init(this.$refs['myChart'])
            var option = {
                title: {
                    text: title,
                    left: 'center',
                    textStyle: {
                        fontSize: 22
                    }
                },
                color: ['#d2001f', '#2a4556', '#4fa3ab'], //调色盘
                legend: {
                    data: legendData, //图例项名称
                    orient: 'horizontal', //图例列表的布局朝向
                    right: 60
                },
                tooltip: { //提示框组件
                    show: true,
                    trigger: 'axis'
                },
                toolbox: {
                    show: true,
                    right: 20,
                    feature: {
                        saveAsImage: { //保存图片
                            type: 'png',
                            name: title,
                            title: '保存为图片',
                            show: true
                        }
                    }
                },
                grid: {
                    left: 50, //离容器左侧距离
                    right: 30,
                    bottom: 100
                },
                xAxis: xAxis,
                yAxis: {},
                dataZoom: [{
                    type: 'slider',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 100,
                    bottom:0
                }],
                series: series
            }
            this.myChart.clear()
            this.myChart.setOption(option)
            window.onresize = function () {
                _this.resizeChart()
                _this.myChart.resize()
            }
        },
        initChartPie: function (title, legendData, series) { //饼图
            var _this = this
            this.myChart = echarts.init(this.$refs['myChart'])
            var option = {
                title: {
                    text: title,
                    left: 'center',
                    textStyle: {
                        fontSize: 22
                    }
                },
                color: ['#ef8f30', '#fbd043', '#f6aa39', '#dc6041', '#f49e4a', '#f8c455', '#eb7c2b'], //调色盘
                legend: {
                    data: legendData, //图例项名称
                    orient: 'vertical', //图例列表的布局朝向
                    right: 60
                },
                tooltip: { //提示框组件
                    show: true,
                    trigger: 'item'
                },
                toolbox: {
                    show: true,
                    right: 20,
                    feature: {
                        saveAsImage: { //保存图片
                            type: 'png',
                            name: title,
                            title: '保存为图片',
                            show: true
                        }
                    }
                },
                series: series
            }
            this.myChart.clear()
            this.myChart.setOption(option)
            window.onresize = function () {
                _this.resizeChart()
                _this.myChart.resize()
            }
        },
        initChartMap: function () { //地图
            var _this = this
            this.myChart = echarts.init(this.$refs['myChart'])
            //绘制全国地图
            $.getJSON('../assets/js/vue/map/china.json', function(data){
                //注册地图
                echarts.registerMap('china', data);
                //绘制地图
                renderMap('china', _this.mapdata);
            });

            //地图点击事件
            this.myChart.on('click', function (params) {
                console.log(params.name)
                if( params.name in _this.provinces ){
                    //如果点击的是34个省、市、自治区，绘制选中地区的二级地图
                    $.getJSON('../assets/js/vue/map/province/'+ _this.provinces[params.name] +'.json', function(data){
                        echarts.registerMap( params.name, data);
                        var d = _this.city;
                        for( var i=0;i<data.features.length;i++ ){
                            d.push({
                                name:data.features[i].properties.name
                            })
                        }
                        renderMap(params.name, d, params.seriesName);
                    });
                }
                else{
                    renderMap('china', _this.mapdata);
                }
            });


            function renderMap(map, data, mapData){
                //初始化绘制全国地图配置
                var option = {
                    title : {
                        text: '预收APE' + _this.APE + '　　　预承保客户数' + _this.YCB,
                        left: 'center',
                        textStyle:{
                            fontSize:20,
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 2500,
                        left: 'left',
                        top: 'bottom',
                        text: ['高', '低'],
                        calculabel: true,
                        inRange: {
                            color: ['#f5a705', '#e6061f'],
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function (params) {
                            if (!isNaN(params.value)) {
                                if (mapData !== 'china') {
                                    return params.name + '分公司<br><small>预收APE：</small>' + params.value
                                } else {
                                    return params.name + '中心支公司<br><small>预收APE：</small>' + params.value
                                }
                                
                            }
                        }
                    },
                    toolbox: {
                        show: true,
                        right: 20,
                        feature: {
                            saveAsImage: { //保存图片
                                type: 'png',
                                name: '预收业绩地图',
                                title: '保存为图片',
                                show: true
                            }
                        }
                    },
                    animationDuration:1000,
                    animationEasing:'cubicOut',
                    animationDurationUpdate:1000
                     
                };
                option.series = [ 
                    {
                        name: map,
                        type: 'map',
                        mapType: map,
                        roam: false,
                        nameMap:{
                            'china':'中国'
                        },
                        label: {
                            normal:{
                                show:true,
                                textStyle:{
                                    color:'#333',
                                    fontSize:13
                                }  
                            },
                            emphasis: {
                                show: true,
                                textStyle:{
                                    color:'#fff',
                                    fontSize:13
                                }
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: '#d0d0d0',
                                borderColor: '#fbfbfb'
                            },
                            emphasis: {
                                areaColor: 'darkorange'
                            }
                        },
                        data:data
                    }   
                ];

                //渲染地图
                _this.myChart.clear()
                _this.myChart.setOption(option);
                window.onresize = function () {
                    _this.resizeChart()
                    _thismyChart.resize()
                }
            }
        }
    }
})